<template>
  <div>
    <div id="content">
      <div class="form">
        <div class="demo-type">
          <el-avatar :size="150" style="margin-top: 10px">
            <img src="../../../assets/img/avatar.png" />
          </el-avatar>
        </div>
        <el-form
          status-icon
          label-width="100px"
          :model="formInline"
          class="demo-ruleForm"
        >
          <el-form-item label="原密码">
            <el-input
              v-model="formInline.oldPassword"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input
              v-model="formInline.newPassword"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              v-model="formInline.rePassword"
              type="password"
            ></el-input>
          </el-form-item>

          <el-form-item class="el-form-item-button">
            <el-button class="button1" type="primary" @click="toResetPassword()"
              >确认</el-button
            >
            <el-button class="button2" type="primary" @click="cancel()"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "password",
  data() {
    return {
      content: "",
      formInline: {
        oldPassword: "",
        newPassword: "",
        rePassword: "",
      },
    };
  },
  methods: {
    cancel() {
      this.$router.push("/personal");
    },
  },
};
</script>

<style lang="less" scoped>
#personal {
  position: absolute;
  top: 20px;
  left: 280px;
  border-bottom: 1px solid red;
}
.ax_default {
  font-family: "Arial Normal", "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  vertical-align: none;
  text-align: center;
  line-height: normal;
  text-transform: none;
}
.demo-ruleForm {
  width: 1000px;
}
.el-form-item {
  margin-top: 50px;
  width: 500px;
  float: left;
}
.form {
  width: 1100px;
  margin-left: 200px;
}
#content {
  height: 500px;
  width: 100%;
  background-image: url("../../../assets/img/bgimg.png");
  background-repeat: no-repeat;
  background-size: 1520px 500px;
  border: 1px solid black;
  border-top: 0;
}
.formleft {
  float: left;
}
.formright {
  float: left;
}
.button1 {
  margin-left: 100px;
}
.button2 {
  margin-left: 500px;
}
.el-form-item-button {
  margin-top: 10px;
  width: 1000px;
}
.demo-type {
  margin-left: 45%;
}
</style>
